<template>
  <div class="zong">
    <cart-bottom :is-checked="isSelectAll" @click.native="checkClick" />
    <span class="all">全选</span>
    <span class="heji">合计：￥{{ totalPrice }}</span>
    <span class="jisuan" @click="calcClick"
      >去计算({{ $store.state.cartList.length }})</span
    >
  </div>
</template>
<script>
import CartBottom from "./CheckButton.vue";
import { mapGetters } from "vuex";
export default {
  name: "CartBottomBar",
  components: {
    CartBottom,
  },
  methods: {
    checkClick() {
      if (this.isSelectAll) {
        // 全部选中
        this.cartList.forEach((item) => {
          item.checked = false;
        });
      } else {
        // 部分不选中或全部没选中
        this.cartList.forEach((item) => {
          item.checked = true;
        });
      }
    },
    calcClick() {
      if (!this.isSelectAll) {
        this.$toast.show("请选择需要购买的商品", 2000);
      }
    },
  },
  computed: {
    ...mapGetters(["cartList"]),

    totalPrice() {
      return this.cartList
        .filter((item) => {
          return item.checked;
        })
        .reduce((preValue, item) => {
          return preValue + item.price * item.count;
        }, 0)
        .toFixed(2);
    },
    isSelectAll() {
      if (this.cartList.length === 0) return false;
      return !this.cartList.find((item) => !item.checked);
    },
  },
};
</script>
<style scoped>
.zong {
  width: 100vw;
  height: 44px;
  background-color: #eee;

  position: absolute;
  left: 0;
  bottom: 49px;
}
.all {
  padding-left: 30px;
  line-height: 44px;
}
.heji {
  margin-left: 20px;
}
.jisuan {
  float: right;
  background-color: red;
  color: #fff;
  width: 90px;
  height: 44px;
  text-align: center;
  line-height: 44px;
}
</style>